<template>
  <div>
    <div>
      <el-button type="primary" icon="el-icon-plus" @click="newStage.isEdit=0;addStage()">新增</el-button>
    </div>
    <div>
      <el-table :data="stages" border style="width: 100%">
        <el-table-column prop="sequence" label="序号"></el-table-column>
        <el-table-column prop="item" label="阶段名称"></el-table-column>
        <el-table-column prop="content" label="阶段简述"></el-table-column>
        <el-table-column prop="state" label="状态"></el-table-column>
        <el-table-column label="操作" fixed="right" width="100">
          <template v-slot="scope">
            <el-button @click="newStage.isEdit = 1;addStage(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog title="项目阶段" :visible.sync="addFormVisible">
        <el-form :model="newStage" label-width="80px">
          <el-form-item label="阶段序号">
            <template v-if="newStage.isEdit==0">
              <el-input-number v-model="newStage.sequence" :min="1" :max="10" label="描述文字"></el-input-number>
            </template>
            <span v-else>{{newStage.sequence}}</span>
          </el-form-item>
          <el-form-item label="阶段名称">
            <el-input v-model="newStage.item" placeholder="请输入阶段名称" type="textarea" maxlength="64"></el-input>
          </el-form-item>
          <el-form-item label="阶段简述">
            <el-input
              v-model="newStage.content"
              placeholder="请简述阶段内容"
              type="textarea"
              maxlength="300"
            ></el-input>
          </el-form-item>
          <el-form-item label="阶段状态">
            <el-radio-group v-model="newStage.state">
              <el-radio-button label="未开展"></el-radio-button>
              <el-radio-button label="进行中"></el-radio-button>
              <el-radio-button label="已结束"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-button @click="addFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit(); addFormVisible = true">提交</el-button>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getprojectinfos, postprojectinfos } from "@/api/table";

export default {
  data() {
    return {
      project: null,
      stages: [],
      addFormVisible: false,
      needfresh: false,
      newStage: {
        isEdit: 0,
        sequence: null,
        item: null,
        content: null,
        state: "未开展"
      }
    };
  },
  watch: {
    needfresh: function() {
      this.getstagelist();
      this.needfresh = false;
    }
  },
  created() {
    this.project = this.$route.params.pjname;
    this.getstagelist();
  },
  methods: {
    addStage(row) {
      this.addFormVisible = true;
      if (this.newStage.isEdit === 1) {
        this.newStage = Object.assign({}, row);
        this.newStage.isEdit = 1;
      }
    },
    submit() {
      postprojectinfos(this.project, "stage", this.newStage).then(response => {
        if (response.data.success === 1) {
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.newStage.isEdit = 0;
          this.needfresh = true;
          this.addFormVisible = false;
        }
      });
    },
    getstagelist() {
      getprojectinfos(this.project, "stage").then(response => {
        this.stages = response.data.stages;
      });
    }
  }
};
</script>

